<template>
  <div>
    <HandNav />
    <Nav />
    <div class="gongsi">
      <div class="active">我的预定</div>
      <div @click="penoterZiLiao">个人资料</div>
    </div>
    <div style="width:80%; margin:auto">
      <div class="yudinginput">
        <span>订单筛选</span>
        <div class="inpyuding">
          <select v-model="formw.option">
            <option value="all">全部订单</option>
            <option value="dzc">待主持</option>
            <option value="yzc">以主持</option>
            <option value="ysc">已删除</option>
          </select>
        </div>
        <div class="inpyuding">
          <select v-model="formw.mincheng">
            <option value="all">所有日期</option>
            <option value="dzc">2019</option>
            <option value="yzc">2020</option>
            <option value="ysc">2021</option>
          </select>
        </div>
      </div>
      <p>
        当前共查询到
        <span>xx</span> 条订单,总订单额度
        <span>xxx</span> 元
      </p>
      <!-- 表格 -->
      <div class="table-zhuchi">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="date" label="典礼时间"></el-table-column>
          <el-table-column prop="name" label="主持人"></el-table-column>
          <el-table-column prop="address" label="酒店名称酒店地址"></el-table-column>
          <el-table-column prop="times" label="下单时间"></el-table-column>
          <el-table-column prop="jine" label="金额"></el-table-column>
          <el-table-column prop="dingdanZ" label="订单状态"></el-table-column>
          <el-table-column prop="beiZ" label="备注"></el-table-column>
          <el-table-column label="操作" >
              <el-button @click="pinjiaClick">{{tableData[0].caozuo}}</el-button>
          </el-table-column>
        </el-table>
      </div>
      <Fenye />
    </div>
    <Foot />
    <!-- 策划的个人资料 -->
    <div>
      <el-dialog
        title="公司资料"
        :visible.sync="dialogVisibleZiLiao"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="formZiLiao" label-width="80px">
          <el-form-item label="公司名称">
            <p>北京xxx婚礼公司</p>
          </el-form-item>
          <el-form-item label="姓名">
            <p>张三</p>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formZiLiao.phone" placeholder="1381381438"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formZiLiao.email" placeholder="574656806@qq.com"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formZiLiao.password"></el-input>
            <p>不可修改密码</p>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="formZiLiao.passwordQ"></el-input>
          </el-form-item>
        </el-form>

        <el-button type="primary" @click="dialogVisibleZiLiao = false">提 交</el-button>
      </el-dialog>
    </div>
    <!-- //评论的对话框 -->
    <el-dialog
      title="评价或者投诉"
      :visible.sync="dialogVisiblepinlun"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="formpinlun" label-width="80px">
        <el-form-item label="典礼时间">
          <p>2019/10/01 上午</p>
        </el-form-item>
        <el-form-item label="主持人">
          <p>XXXX</p>
        </el-form-item>
        <el-form-item label="满意度" >
          <el-radio label="非常满意" v-model="formpinlun.manyi"></el-radio>
          <el-radio label="满意" v-model="formpinlun.manyi"></el-radio>
          <el-radio label="不满意" v-model="formpinlun.manyi"></el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblepinlun = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HandNav from "../../../componnet/qiantai/HeadNav";
import Nav from "../../../componnet/qiantai/Nav";
import Foot from "../../../componnet/qiantai/Foot";
import Fenye from "../fenyezujian";
export default {
  name: "Cehuashi",
  data() {
    return {
      formw: {},
      formpinlun:{},
      dialogVisibleZiLiao: false,
      dialogVisiblepinlun: false,
      formZiLiao: {},
      tableData: [
        {
          date: "2018年10月1日上午",
          name: "张艺谋138123455678",
          address: "香格里拉",
          times: "2018年6月1日13:36",
          jine: "2000",
          dingdanZ: "待主持",
          beiZ: "需要两次彩排",
          caozuo: "评价或投诉"
        }
      ]
    };
  },
  methods: {
    //   个人资料按钮
    penoterZiLiao() {
      this.dialogVisibleZiLiao = true;
    },
    handleClose() {
      this.dialogVisibleZiLiao = false;
      this.dialogVisiblepinlun = false;
    },
    pinjiaClick() {
      this.dialogVisiblepinlun = true;
    }
  },
  components: {
    HandNav,
    Foot,
    Nav,
    Fenye
  }
};
</script>

<style lang="less" scoped>
.gongsi {
  width: 80%;
  margin: auto;
  display: flex;
  div {
    width: 15%;
    height: 50px;
    border: solid 1px #000000;
    background-color: #cccccc;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000;
    cursor: pointer;
  }
  .active {
    background-color: #fff;
  }
}

.yudinginput {
  display: flex;
  color: #000;
  font-size: 16px;
  .inpyuding {
    border: solid 1px #000;
    margin: 0 5px;
    padding-left: 10px;
    padding-top: 3px;
    input {
      outline: none;
      border: 0;
    }
    select {
      width: 110px;
      border: solid 0px #000;
      outline: none;
    }
  }
}
.table-zhuchi {
  margin-bottom: 200px;
}
</style>